<!--
 * @description 积分菜单组件
 * @date 2022/11/12
 -->
<template>
  <div class="integral-menu-comp" :style="{ 'margin-top': top }">
    <div
      class="t-menu"
      :style="{ paddingRight: spacing, paddingLeft: spacing }"
    >
      <div
        v-for="(item, h) in list"
        :key="h"
        class="menu-item record"
        :class="{ draw: item.id == 2, exchange: item.id == 3 }"
        :style="{ width: showType }"
      >
        <div class="menu-text">{{ item.classifyName }}</div>
        <div class="menu-pic">
          <img src="./images/go.png" alt="">
        </div>
      </div>
    </div>
    <!--弹窗-->
    <van-overlay :show="hintFlag" :z-index="1000">
      <div class="hint-box" @click.stop>
        <div class="content">
          <div class="title" />
          <div class="desc">功能暂未开放，敬请期待!</div>
          <div class="btn" @click="hintFlag = false">确定</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import mixins from './../mixins'
import mixin from './mixins'
export default {
  name: 'IntegralMenuComp',
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          id: 1,
          classifyName: '积分记录',
          linkAddress: '/pointsRecord',
          linkType: '1'
        },
        {
          id: 2,
          classifyName: '积分抽奖',
          linkAddress: '',
          linkType: '1'
        },
        {
          id: 3,
          classifyName: '积分兑换',
          linkAddress: '/mall',
          linkType: '1'
        }
      ],
      hintFlag: false
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    toDialog() {
      this.hintFlag = !this.hintFlag
    },
    setData(data) {
      if (data.dataList !== '' && data.dataList.code == 200) {
        if (data.dataList.data.length > 0) {
          this.list = data.dataList.data
        } else {
          this.list = this.defaultList
        }
      } else {
        this.list = this.defaultList
      }
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";
p {
  margin: 0;
}
.integral-menu-comp {
  .t-menu {
    width: rem(750);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .menu-item {
      width: rem(211);
      height: rem(138);
      padding: rem(25) rem(10) rem(10) rem(21);
      .menu-text {
        font-size: rem(30);
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: bold;
        text-align: left;
        color: #ffffff;
      }
      .menu-pic {
        margin-top: rem(15);
        width: rem(74);
        height: rem(34);
        > img {
          width: 100%;
          height: 100%;
        }
      }
      &.record {
        background: url("./images/record.png") no-repeat;
        background-size: 100% 100%;
      }
      &.draw {
        background: url("./images/draw.png") no-repeat;
        background-size: 100% 100%;
      }
      &.exchange {
        background: url("./images/exchange.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .hint-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    .content {
      width: rem(542);
      height: rem(321);
      background-image: url("./images/pop-bgi.png");
      background-size: 100% 100%;
      padding-top: rem(45);
      .title {
        margin: 0 auto;
        background-image: url("./images/pop-title.png");
        background-size: 100% 100%;
        width: rem(159);
        height: rem(44);
        margin-top: rem(10);
      }
      .desc {
        margin-top: rem(40);
        padding: 0 rem(40);
        font-size: rem(28);
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: center;
        color: #666666;
      }
    }
    .close {
      background: url("./images/close.png") no-repeat;
      background-size: 100% 100%;
      margin: rem(30) auto;
      width: rem(68);
      height: rem(68);
    }
    .btn {
      margin: rem(40) auto 0;
      width: rem(360);
      height: rem(80);
      @include bg-color($mainColor);
      border-radius: rem(40);
      //box-shadow:rem(3)  rem(5.5)  rem(10)  rem(6);
      font-size: rem(32);
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #f7f9f8;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
